<template>
  <div class="maincs">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div
        class="main_white padding10"
        element-loading-text="加载中"
        v-loading="listLoading"
        style="min-height: 780px"
      >
        <div>
          <div class="maincs_tzp">
            <div class="main_tile_l marginLeft0"><em></em>用户标签列表</div>
          </div>
          <div class="maincs_tz">
            <ul class="boxha">
              <li
                v-for="(item, index) in list"
                :key="index"
                @mouseover="addActive(item)"
                @mouseout="removeActive(item)"
                style="min-width: 64px"
              >
                <span>{{ item.label }}</span>
                <div v-show="item.show" class="boxcenter maincs_tzp">
                  <span class="lf-m-r15" title="修改"
                    ><svg-icon
                      icon-class="commodity_modify"
                      @click="
                        (addedFormVisible = true),
                          (info.name = item.label),
                          (id = item.id)
                      "
                  /></span>
                  <span title="删除"
                    ><svg-icon
                      icon-class="commodity_delete"
                      @click="delet(item, index)"
                  /></span>
                </div>
              </li>
              <el-input
                v-model.trim="text"
                placeholder="不能超过15个字"
                maxlength="15"
                clearable
                ref="freight1"
                class="wid180"
                v-show="freight1"
                @blur.prevent="
                  val => {
                    inputBlur(val, 1);
                  }
                "
                @keyup.enter.native="$event.target.blur"
              ></el-input>
              <el-button type="primary" @click="add(1)">{{
                freight1 ? "保存标签" : "新增标签"
              }}</el-button>
            </ul>
          </div>
        </div>

        <el-dialog
          title="修改"
          @close="$refs['userListFrom'].clearValidate()"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :visible.sync="addedFormVisible"
          class="main_dialog dialog300"
        >
          <el-form
            :inline="false"
            :model="info"
            :rules="rules"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="10px"
          >
            <el-form-item label=" " prop="name">
              <el-input
                v-model.trim="info.name"
                placeholder
                clearable
                class="wid240"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              @click="
                (addedFormVisible = false),
                  $refs['userListFrom'].clearValidate()
              "
              >取 消</el-button
            >
            <el-button type="primary" @click="edit" v-repeatClick
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  label_index,
  label_add,
  label_edit,
  label_delete
} from "@/api/user/userlabel";
import rules from "@/rules/user/userList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  directives: {
    // 聚焦元素
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      }
    }
  },
  components: {},
  data() {
    return {
      // 验证
      rules,
      // 修改
      addedFormVisible: false,
      info: {
        name: ""
      },
      id: "",
      // 填字
      text: "",
      freight1: false,
      // 列表
      list: [],
      listLoading: false
    };
  },
  created() {},
  methods: {
    // 修改
    edit() {
      this.$refs["userListFrom"].validate(valid => {
        if (valid) {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name), {
                  label: this.info.name,
                  id: this.id
                }) + apiUrl().appsecret
              )
            },
            apiUrl().name,
            { label: this.info.name, id: this.id }
          );
          label_edit(data).then(res => {
            if (res.errcode == 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.addedFormVisible = false;
              this.label_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 删除
    delet(item, index) {
      console.log(item, index);
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        { id: item.id },
        apiUrl().name
      );

      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          label_delete(data).then(res => {
            if (res.errcode == 0) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.list.splice(index, 1);
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 点击新增
    add(index) {
      let js = 0;
      for (let i = 1; i <= 4; i++) {
        if (this["freight" + i]) {
          js++;
          return;
        }
      }
      if (js == 0) {
        this["freight" + index] = true;
        this.$nextTick(() => {
          this.$refs[["freight" + index][0]].focus();
        });
        this.text = "";
      }
    },
    // 焦点离开和保存
    inputBlur(val, index) {
      if (val.target.value != "") {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name), {
                label: this.text
              }) + apiUrl().appsecret
            )
          },
          apiUrl().name,
          { label: this.text }
        );
        label_add(data).then(res => {
          if (res.errcode == 0) {
            this.$message({
              message: "新增成功",
              type: "success"
            });
            this["freight" + index] = !this["freight" + index];
            this.label_index();
          } else {
            this.$message.error(res.errmsg);
            this["freight" + index] = !this["freight" + index];
          }
        });
      } else {
        this.$nextTick(() => {
          this["freight" + index] = false;
        });
      }
    },
    // 列表
    label_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      label_index(data).then(res => {
        console.log(res);
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.map(e => {
            e.show = false;
          });
          this.list = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    addActive(item) {
      item.show = true;
    },

    removeActive(item) {
      item.show = false;
    }
  },
  created() {
    // 列表
    this.label_index();
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.maincs {
  .main_tile {
    border-bottom: 1px solid $subActive;
    margin-bottom: 15px;
  }
  .maincs_tz {
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    ul {
      margin-top: 15px;
      li {
        position: relative;
        height: 32px;
        line-height: 32px;
        border: 1px solid $colour_c;
        border-radius: 4px;
        margin-right: 10px;
        padding-left: 20px;
        padding-right: 20px;
        color: $colour_6;
        font-size: $font_14;
        &.on {
          background: $colour_c;
        }
        .svg-icon {
          font-size: 13px;
          color: $white;
          &:hover {
            cursor: pointer;
          }
        }
        .lf-m-r15 {
          margin-right: 15px;
        }
        .maincs_tzp {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9;
          width: 100%;
          height: 100%;
          border-radius: 4px;
          background: $subMenuHover;
          &.on {
            text-align: center;
            .svg-icon {
              vertical-align: 0 !important;
            }
          }
        }
      }
    }
    /deep/.el-input {
      margin-right: 7px;
    }
    /deep/.el-button {
      margin-bottom: 10px;
    }
  }
}
</style>
